<!-- 全部评价 -->
<template>
  <div>
    <nut-navbar
      @on-click-back="back"
      title="评价"
    >
      <template #right>
        <nut-icon
          class="right"
          name="cart2"
        ></nut-icon>
      </template>
    </nut-navbar>
    <div class="button">
      <nut-button
        type="default"
        size="small"
        v-for="(btn,index) in btnList"
        :key="btn"
        @click="active(index)"
        :class="{active:btnChange===index}"
      >{{btn.title}}</nut-button>
    </div>
    <div class="evaluation_card">
      <evaluationCardCom></evaluationCardCom>
      <evaluationCardCom></evaluationCardCom>
      <evaluationCardCom></evaluationCardCom>
      <evaluationCardCom></evaluationCardCom>
      <evaluationCardCom></evaluationCardCom>
      <evaluationCardCom></evaluationCardCom>
      <evaluationCardCom></evaluationCardCom>
      <evaluationCardCom></evaluationCardCom>
    </div>
  </div>
</template>

<script>
import evaluationCardCom from '@/components/evaluationCardCom.vue'

export default {
  props: [],
  data () {
    return {
      btnList: [
        { title: '全部' },
        { title: '最新' },
        { title: '好评(233)' },
        { title: '中评(0)' },
        { title: '差评(0)' },
        { title: '有图(6)' },
      ],
      btnChange: 0,
      imgList: []
    }
  },
  methods: {
    active (index) {
      this.btnChange = index
    },
    back () {
      this.$router.push('/GoodsDetails')
    }

  },

  components: {
    evaluationCardCom
  }
}
</script>

<style lang="scss" scoped>
::v-deep .nut-navbar__title {
  font-weight: 700;
  font-size: 16px;
  color: #000;
}
.nut-navbar {
  background-color: rgba(234, 233, 229, 1);
}
.active {
  background-color: #8e7e6f;
  color: #fff;
}
.button {
  height: 65px;
  padding: 0 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  .nut-button {
    margin-right: 5px;
  }
}
.evaluation_card {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 10px 12px;
  .content {
    margin-bottom: 20px;
  }
}
</style>